<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>旭云智慧生产管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="icon" th:href="@{/static/console/common/images/favicon.ico}">
    <link th:href="@{/static/console/bootstrap-icons/bootstrap-icons.css}" type="text/css" rel="stylesheet" />
<!--    <link rel="stylesheet" type="text/css" th:href="@{/static/console/common/layui/css/layui.css}">-->
    <link rel="stylesheet" type="text/css" th:href="@{/static/console/common/layui-2.9.1/css/layui.css}">
    <link th:href="@{/static/console/css/public.css}" type="text/css" rel="stylesheet" />
    <link th:href="@{/static/console/css/system/admin-1.0.css}" type="text/css" rel="stylesheet" />
    <link th:href="@{/static/console/css/system/erp-panel.css}" type="text/css" rel="stylesheet" />
    <style>
        /** 应用快捷块样式 */
        .contract-text{overflow: hidden; white-space: nowrap;text-overflow: ellipsis}
        /*.layui-bg-grey1 {*/
        /*    !*background-color: #fafafa !important;*!*/
        /*    !*color: #333 !important;*!*/
        /*    color: #52c41a !important;;*/
        /*    background: #f6ffed !important;;*/
        /*    border: 1px solid #b7eb8f;*/
        /*}*/

        .layui-bg-grey1{color:#8c8c8c;background:#fafafa;border:1px solid #ccc}
        .layui-bg-orange1 {
            /*background-color: #fafafa !important;*/
            /*color: #333 !important;*/
            color: #FF5722 !important;;
            background: #fff1f0 !important;;
            border: 1px solid #ffa39e;
        }
        .layui-bg-green1 {
            /*background-color: #fafafa !important;*/
            /*color: #333 !important;*/
            color: #52c41a !important;;
            background: #f6ffed !important;;
            border: 1px solid #b7eb8f;
        }
        .layui-bg-cyan1 {
            /*background-color: #fafafa !important;*/
            /*color: #333 !important;*/
            color: #faad14 !important;;
            background: #fffbe6 !important;;
            border: 1px solid #ffe58f;
        }
        .layui-bg-blue1 {
            /*background-color: #fafafa !important;*/
            /*color: #333 !important;*/
            color: #1E9FFF !important;;
            background: #e6f7ff !important;;
            border: 1px solid #91d5ff;
        }
        .layui-bg-purple1 {
            /*background-color: #fafafa !important;*/
            /*color: #333 !important;*/
            color: #a233c6 !important;;
            background: #e8e0ff !important;;
            border: 1px solid #b37feb;
        }
        .layui-bg-black1 {
            /*background-color: #fafafa !important;*/
            /*color: #333 !important;*/
            color: #12120d  !important;;
            background: #f8f8f8 !important;;
            border: 1px solid #595959;
        }
        .layui-bg-light1 {
            /*background-color: #fafafa !important;*/
            /*color: #333 !important;*/
            color: #0D8B0F !important;;
            background: rgba(37, 139, 18, 0.29) !important;;
            border: 1px solid rgba(24, 139, 49, 0.57);
        }
    </style>
</head>

<script th:inline="javascript">
    const isProList = [[${isProList}]]
    const proTypeList = [[${proTypeList}]]
    const carTypeList = [[${carTypeList}]]
    const weightTypeList = [[${weightTypeList}]]
</script>
<body>
<!-- 正文开始 -->
<a href="javascript:void(0)" class="sync-btn" style="display: none"></a>
<div class="layui-fluid ew-console-wrapper">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日预计方量(方)<span class="layui-badge layui-badge-green pull-right">日</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font title-planStere">0</p>
                    <!--<p>总访问量<span class="pull-right">280 万</span></p>-->
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日完成方量(方)<span class="layui-badge layui-badge-blue pull-right">日</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font title-dayStere">0</p>
                    <!--<p>总销售额<span class="pull-right">68 万</span></p>-->
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    本月方量(方)<span class="layui-badge layui-badge-orange pull-right">月</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font title-monthStere">0</p>
                    <!--<p>转化率<span class="pull-right">60%</span></p>-->
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    全年方量(方)<span class="layui-badge layui-badge-red pull-right">年</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font title-yearStere">0</p>
                    <!--<p>转化率<span class="pull-right">60%</span></p>-->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 快捷方式 -->
<div class="layui-col-xs12">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="tabZZT">
                <ul class="layui-tab-title">
                    <li class="layui-this">发货趋势</li>
                    <li>发货方量</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-xs12 layui-col-md8">
                                <div id="sendTrend" style="height: 300px;margin-top: 20px;"></div>
                            </div>
                            <div class="layui-col-xs12 layui-col-md4">
                                <table class="layui-table" lay-skin="nob">
                                    <colgroup>
                                        <col>
                                        <col>
                                        <col>
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr style="background: none;color: #333;">
                                        <th colspan="4">按生产线排名</th>
                                    </tr>
                                    </thead>
                                    <tbody class="line-body-list">
<!--                                    <tr>-->
<!--                                        <td><span class="layui-badge">1线</span></td>-->
<!--                                        <td>-->
<!--                                            <span class="layui-badge">产量:12145m³</span>-->
<!--                                        </td>-->
<!--                                        <td>-->
<!--                                            <span class="layui-badge">泵送:1245m³</span>-->
<!--                                        </td>-->
<!--                                        <td>-->
<!--                                            <span class="layui-badge">产线使用率:56%</span>-->
<!--                                        </td>-->
<!--                                    </tr>-->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-xs12 layui-col-md8">
                                <div id="productionTrend" style="height: 300px;margin-top: 20px;"></div>
                            </div>
                            <div class="layui-col-xs12 layui-col-md4">
                                <table class="layui-table" lay-skin="nob">
                                    <colgroup>
                                        <col width="20">
                                        <col>
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr style="background: none;color: #333;">
                                        <th colspan="3">车辆排名top榜</th>
                                    </tr>
                                    </thead>
                                    <tbody class="car-body-list">
<!--                                    <tr>-->
<!--                                        <td><span class="layui-badge">1</span></td>-->
<!--                                        <td class="contract-text">D623[渝A12345]</td>-->
<!--                                        <td class="contract-text">-->
<!--                                            <span class="layui-badge layui-bg-orange">量:324m³</span>-->
<!--                                            <span class="layui-badge layui-bg-blue">车:12次</span>-->
<!--                                            <span class="layui-badge layui-bg-cyan">泵量:234m³</span>-->
<!--                                            <span class="layui-badge layui-bg-green">运距:234km</span>-->
<!--                                        </td>-->
<!--                                    </tr>-->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space15">
    <div class="layui-col-md8 layui-col-sm6">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">项目进度</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="40"/>
                                <col/>
                                <col/>
                                <col/>
                                <col/>
                                <col width="160"/>
                            </colgroup>
                            <thead>
                            <tr>
                                <td></td>
                                <td>项目名称</td>
                                <td align="center">浇筑部位</td>
                                <td align="center">开盘时间</td>
                                <td align="center">状态</td>
                                <td align="center">进度</td>
                            </tr>
                            </thead>
                            <tbody class="conProgress-body-list">
<!--                            <tr>-->
<!--                                <td><span class="layui-badge layui-bg-cyan">1</span></td>-->
<!--                                <td><span class="layui-text"><a>仓库管理系统</a></span></td>-->
<!--                                <td align="center">仓库管理系统仓库管理系统</td>-->
<!--                                <td align="center">2020-06-01</td>-->
<!--                                <td align="center"><span class="text-success">进行中</span></td>-->
<!--                                <td class="contract-text">-->
<!--                                    <div class="layui-progress" lay-showpercent="true">-->
<!--                                        <div class="layui-progress-bar" lay-percent="124 / 1000"></div>-->
<!--                                    </div>-->
<!--                                </td>-->
<!--                            </tr>-->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">生产强度占比</div>
                    <div class="layui-card" style="overflow: hidden;">
                        <!--<div class="layui-card-header">强度占比</div>-->
                        <div class="layui-card-body">
                            <div id="strengthProportion" style="height: 300px;"></div>
                            <div style="color: #10B4E8;font-size: 18px;position: absolute;bottom: 85px;left: 0;right:0;text-align: center;cursor: pointer;">
                                <!--签到明细<i class="layui-icon layui-icon-right" style="font-size: 16px;"></i>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="tabZZT">
                            <ul class="layui-tab-title">
                                <li class="layui-this">原材过磅车辆</li>
                                <li>生产过磅车辆</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-row">
                                        <div class="layui-col-xs12">
                                            <table class="layui-table" lay-skin="nob">
                                                <colgroup>
                                                    <col width="30">
                                                    <col>
                                                    <col>
                                                </colgroup>
                                                <tbody class="material-weight-body-list">
<!--                                                <tr>-->
<!--                                                    <td><span class="layui-badge layui-bg-cyan">1</span></td>-->
<!--                                                    <td><span class="layui-badge layui-bg-blue">渝A32124 山石[0-1]</span></td>-->
<!--                                                    <td>01-25 02:00:00|已过毛重</td>-->
<!--                                                </tr>-->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-tab-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs12">
                                            <table class="layui-table" lay-skin="nob">
                                                <colgroup>
                                                    <col width="30">
                                                    <col>
                                                    <col>
                                                </colgroup>
                                                <tbody class="production-weight-body-list">
<!--                                                <tr>-->
<!--                                                    <td><span class="layui-badge layui-bg-cyan">1</span></td>-->
<!--                                                    <td><span class="layui-badge layui-bg-green">渝A32124 D662</span></td>-->
<!--                                                    <td>01-25 02:00|发货过磅</td>-->
<!--                                                </tr>-->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4 layui-col-sm6">
        <div class="layui-card">
            <div class="layui-card-header">车辆排队</div>
            <div class="layui-card-body">
                <table class="layui-table" lay-skin="line">
                    <thead>
                    <tr>
                        <td style="width: 60px;">生产线</td>
                        <td>
                            待装车辆
                        </td>
                    </tr>
                    </thead>
                    <tbody class="line-send-body-list">
<!--                    <tr>-->
<!--                        <td><span class="layui-badge layui-bg-cyan">1线</span></td>-->
<!--                        <td>-->
<!--                            <span class="layui-badge layui-bg-blue">A26 [15m³]</span>-->
<!--                            <span class="layui-badge layui-bg-blue">A26 [15m³]</span>-->
<!--                            <span class="layui-badge layui-bg-blue">A26 [15m³]</span>-->
<!--                            <span class="layui-badge layui-bg-blue">A26 [15m³]</span>-->
<!--                            <span class="layui-badge layui-bg-blue">A26 [15m³]</span>-->
<!--                        </td>-->
<!--                    </tr>-->
                    </tbody>
                </table>
                <table class="layui-table" lay-skin="line">
                    <tbody class="line-wait-body-list">
<!--                    <tr>-->
<!--                        <td>-->
<!--                            <span class="layui-badge layui-bg-green">A26</span>-->
<!--                            <span class="layui-badge layui-bg-green">A26</span>-->
<!--                            <span class="layui-badge layui-bg-green">A26</span>-->
<!--                        </td>-->
<!--                    </tr>-->
                </table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card">
                <div class="layui-card-header">待办事项</div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-skin="line">
                        <colgroup>
                            <col width="80"/>
                            <col/>
                            <col width="80"/>
                        </colgroup>
                        <thead>
                        <tr>
                            <td align="center">优先级</td>
                            <td>任务名称</td>
                            <td align="center">状态</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td align="center">
                                <span class="layui-badge layui-badge-red layui-badge-priority">1</span>
                            </td>
                            <td><span class="layui-text"><a>退料处理</a></span></td>
                            <td align="center"><span class="text-warning">未开始</span></td>
                        </tr>
                        <tr>
                            <td align="center">
                                <span class="layui-badge layui-badge-yellow layui-badge-priority">2</span>
                            </td>
                            <td><span class="layui-text"><a>退料处理</a></span></td>
                            <td align="center"><span class="text-warning">未开始</span></td>
                        </tr>
                        <tr>
                            <td align="center">
                                <span class="layui-badge layui-badge-blue layui-badge-priority">3</span>
                            </td>
                            <td><span class="layui-text"><a>转料处理</a></span></td>
                            <td align="center"><span class="text-success">进行中</span></td>
                        </tr>
                        <tr>
                            <td align="center">
                                <span class="layui-badge layui-badge-blue layui-badge-priority">3</span>
                            </td>
                            <td><span class="layui-text"><a>转料处理</a></span></td>
                            <td align="center">
                                <del class="text-muted">已完成</del>
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                <span class="layui-badge layui-badge-blue layui-badge-priority">3</span>
                            </td>
                            <td><span class="layui-text"><a>开盘提醒</a></span></td>
                            <td align="center">
                                <del class="text-muted">已完成</del>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- js部分 -->
<script th:src="@{/static/console/assets/js/jquery-3.2.1.min.js}"></script>
<!--<script type="text/javascript" th:src="@{/static/console/common/layui/layui.all.js}"></script>-->
<script type="text/javascript" th:src="@{/static/console/common/layui-2.9.1/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/echarts.min.js}"></script>
<!--<script type="text/javascript" th:src="@{/static/console/common/echarts/echarts.min.js}"></script>-->
<script type="text/javascript" th:src="@{/static/console/common/echarts/echartsTheme.js}"></script>
<script th:src="@{/static/console/js/pages/base.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/console/js/pages/system/panel.js}" charset="utf-8"></script>
<!--<script src="../../common/echarts/echarts.min.js"></script>-->
<!--<script src="../../common/echarts/echartsTheme.js"></script>-->
<script>
//     layui.use(['layer', 'carousel', 'element'], function () {
//         var $ = layui.jquery;
//         var layer = layui.layer;
//         var carousel = layui.carousel;
//         var device = layui.device();
//         var element = layui.element;
//
//         // 渲染轮播
//         carousel.render({
//             elem: '#workplaceNewsCarousel',
//             width: '100%',
//             height: '70px',
//             arrow: 'none',
//             autoplay: true,
//             trigger: device.ios || device.android ? 'click' : 'hover',
//             anim: 'fade'
//         });
//         var myCharts1 = echarts.init(document.getElementById('consoleChartsDay'));
//         var options1 = {
//             title:{subtext:''},
//             tooltip: {
//                 trigger: 'item',
//                 formatter: "{a} <br/>{b} : {c} ({d}%)"
//             },
//             legend: {
//                 top: '5%',
//                 left: 'left'
//             },
//             series: [
//                 {
//                     name: '强度占比',
//                     type: 'pie',
//                     radius: ['40%', '70%'],
//                     avoidLabelOverlap: false,
//                     label: {
//                         show: false,
//                         position: 'center'
//                     },
//                     label: {
//                         show: true,
//                         formatter:'{name|{b}}\n}'
//                     },
//                     emphasis: {
//                         label: {
//                             show: true,
//                             fontSize: 40,
//                             fontWeight: 'bold'
//                         }
//                     },
//                     labelLine: {
//                         show: false
//                     },
//                     data: [
//                         { value: 1048, name: 'C30' },
//                         { value: 735, name: 'C35' },
//                         { value: 580, name: 'C40' },
//                         { value: 484, name: 'C25' },
//                         { value: 300, name: 'C20' }
//                     ],
//                     emphasis: {
//                         itemStyle: {
//                             shadowBlur: 10,
//                             shadowOffsetX: 0,
//                             shadowColor: 'rgba(0, 0, 0, 0.5)'
//                         }
//                     }
//                 }
//             ]
//         };
//         myCharts1.setOption(options1);
//         // 渲染销售额图表
//         var myCharts3 = echarts.init(document.getElementById('xse'), myEchartsTheme);
//         var option3 = {
//             title: {
//                 text: '生产方量'
//             },
//             tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}},
//             color: ['#10B4E8', '#FFA800'],
//             legend: {
//                 selectedMode: false,
//                 data: ['泵送方量', '非泵送方量'], textStyle: {color: '#595959'}
//             },
//             grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
//             xAxis: {
//                 nameTextStyle: {color: '#595959'},
//                 type: 'category',
//                 data: ['0', '2',  '4', '6',  '8', '10', '12','14', '16', '18', '20',  '22'],
//                 axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
//                 axisLabel: {color: '#8c8c8c'},
//                 axisTick: {alignWithLabel: true}
//             },
//             yAxis: {
//                 nameTextStyle: {color: '#595959'},
//                 type: 'value',
//                 boundaryGap: ['0', '20%'],
//                 axisTick: {show: false},
// //              axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
//                 axisLabel: {color: '#8c8c8c'},
//                 splitLine: {show: false},
//                 splitArea: {show: false},
//                 minInterval: 1
//             },
//             series: [{
//                 name: '泵送方量', type: 'bar', stack: 'one', barMaxWidth: '30px',
//                 label: {normal: {show: true, position: 'inside'}}
//             }, {
//                 name: '非泵送方量', type: 'bar', stack: 'one', barMaxWidth: '30px',
//                 label: {normal: {show: true, position: 'inside'}}
//             }]
//         };
//         myCharts3.setOption(option3);
//
//         myCharts3.setOption({series: [{data: [55, 86, 88, 13, 98, 56, 65, 54, 98, 95, 56, 30]},
//                 {data: [58, 86, 80, 125, 82, 56, 65, 56, 88, 85, 68, 32]}]});
//         // 渲染访问量图表
//         var myCharts4 = echarts.init(document.getElementById('fwl'), myEchartsTheme);
//         option4 = {
//             title: {
//                 text: '发货趋势'
//             },
//             tooltip: {
//                 trigger: 'axis'
//             },
//             legend: {
//                 data: ['发货方量', '签收方量', '泵送方量']
//             },
//             grid: {
//                 left: '3%',
//                 right: '4%',
//                 bottom: '3%',
//                 containLabel: true
//             },
//             toolbox: {
//                 feature: {
//                     saveAsImage: {}
//                 }
//             },
//             xAxis: {
//                 type: 'category',
//                 boundaryGap: false,
//                 data: ['0', '2',  '4', '6',  '8', '10', '12','14', '16', '18', '20',  '22']
//             },
//             yAxis: {
//                 type: 'value'
//             },
//             series: [
//                 {
//                     name: '发货方量',
//                     type: 'line',
//                     stack: 'Total',
//                     data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210]
//                 },
//                 {
//                     name: '签收方量',
//                     type: 'line',
//                     stack: 'Total',
//                     data: [220, 182, 191, 234, 290, 330, 310, 101, 134, 90, 230, 210]
//                 },
//                 {
//                     name: '泵送方量',
//                     type: 'line',
//                     stack: 'Total',
//                     data: [150, 232, 201, 154, 190, 330, 410, 101, 134, 90, 230, 210]
//                 }
//
//             ]
//         };
//         myCharts4.setOption(option4);
//
//         // 切换选项卡重新渲染
//         element.on('tab(tabZZT)', function (data) {
//             if (data.index == 0) {
//                 myCharts3.resize();
//             } else {
//                 myCharts4.resize();
//             }
//         });
//
//         // 窗口大小改变事件
//         window.onresize = function () {
//             myCharts3.resize();
//             myCharts4.resize();
//         };
//
//     });
</script>
</body>
</html>